<template>
  <div>
    <el-dialog :title="row.patient_name" :visible.sync="dialogVisible" width="50%" class="dialog" v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" :before-close="handleClose" :close-on-click-modal="false" center>

      <!--   <div class="room" style="background-color:#F5F5F5">
        <div class="flex-1 content_warp">
          <div class="message_container_warp">
            <div class="sheader user-select flex-center" data-type="top">
              <div v-show="finish && list.length" class="f14 c-9">
                没有更多消息了
              </div>
              <div v-show="loading" class="c-9 f14">
                <i class="el-icon-loading"></i> 正在加载数据中 ...
              </div>
            </div>

            <div v-for="item in list" :key="item.id" wx:key="index" :class="['mt20', 'message_' + item.id]">
              <div :class="{
              messageRoom_item: true,
              messageRoom_right:
                item.sender == row.doctor_id && item.sender_type == 'doctor',
            }">
                <img class="messageRoom_item_image" :src="getImage(row)" alt="" />
                <div v-if="item.type === 'txt'" class="messageRoom_item_message">
                  {{ item.content }}
                </div>
                <imgWarp v-else-if="item.type === 'img'" :ref="item.class" :item="item" data-type="img"></imgWarp>
              </div>
            </div>

            <div class="footer user-select" data-type="bottom" style="color: transparent">
              -----
            </div>
          </div>
        </div>
        <div class="tools flex-space-between">
          <form style="display: none">
            <input type="file" ref="fileImageRef" accept="image/*" @change="upload" />
            <input type="file" ref="uploadFileRef" accept=".zip,.rar,.pdf,.docx,.doc,.xlsx,.csv,.txt"
              @change="upload" />
          </form>
        </div>
        <div class="entry_box">
          <div ref="editor_content" class="editor_content" spellcheck="true" contenteditable
            @keydown="onKeydownEvent($event)" @input="onInput($event)" placeholder="请输入..."></div>
          <div class="entry_box_btn flex-align-center">
            <div class="f12 c-9 mr10">Enter发送 / Shift+Enter换行</div>
            <el-button size="small" :disabled="isDisabled" type="primary" @click="onClickSend">发 送</el-button>
          </div>
        </div>
      </div> -->
      <room :row="row" @dialogClose="handleClose"  />
    </el-dialog>
  </div>
</template>

<script>
import {
  ApimessageRecord,
  ApiGetOrderMessageRecord
} from "@a/index";
import room from './room.vue'
import imgWarp from "./imgWarp.vue";
import userImg from "@/assets/image/jsDoctor.jpg";
export default {
  components: { imgWarp, room },
  props: {},
  data() {
    return {
      finish: false,
      isDisabled: false,
      last_page: '',
      dialogVisible: false,
      list: [],
      firstid: "",
      lastid: "",
      id: "",
      loading: false,
      row: {},
      params: {
        page: 1,
        size: 10
      }
    };
  },
  watch: {},
  computed: {},
  methods: {



    getImage(item) {
      if (item.sender === this.row.doctor_id && item.sender_type == "doctor") {
        if (this.row.icon) {
          if (this.row.icon.indexOf("http") == 0) {
            return this.row.icon;
          } else {
            return this.$path + this.row.icon;
          }
        }
      } else {
        return userImg;
      }
    },
    upload() { },
    onClickSend() {

    },

    show(row) {
      this.row = row;
      /*    this.getMessage() */
      this.dialogVisible = true;
    },
    getMessage() {
      ApiGetOrderMessageRecord({ order_id: this.row.id }).then(res => {
        this.list = res.data
        console.log(res.data)
      })
    },
    handleClose() {
      this.dialogVisible = false;
      this.id = "";
      this.firstid = "";
      this.lastid = "";
      this.list = [];
      this.params = {
        page: 1,
        size: 10
      }
      this.$emit("refresh")
    },

  },
  created() { },

};
</script>

<style lang="less" scoped>
.room {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content_warp {
    overflow: hidden;
  }

  .message_container_warp {
    height: 100%;
    overflow: auto;
  }

  .tools {
    user-select: none;
    padding: 0 8px;
    height: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: #fff;
    flex-shrink: 0;
  }

  .entry_box {
    height: 170px;
    box-sizing: border-box;
    padding: 10px 10px 35px;
    position: relative;
    flex-shrink: 0;
  }

  .entry_box_btn {
    position: absolute;
    bottom: 0px;
    right: 0;
  }

  .editor_content {
    height: 100%;
    overflow-y: auto;
    font-size: 15px;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
  }
  .editor_content[contenteditable]:empty:before {
    content: attr(placeholder);
    color: #464545;
    font-size: 14px;
    font-weight: 400;
  }

  .editor_content[contenteditable]:focus {
    content: none;
  }

  .messageRoom_item {
    display: flex;
    align-items: flex-start;
    padding: 0 100px 0 0;
  }
  .messageRoom_item_image {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0 10px 0 0;
  }
  .messageRoom_item_message {
    padding: 6px;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 16px;
    white-space: pre-line;
    word-break: break-word;
    word-wrap: break-word;
  }
  .messageRoom_right {
    flex-direction: row-reverse;
    padding: 0 0 0 100px;
    .messageRoom_item_image {
      margin: 0 0 0 10px;
    }
    .messageRoom_item_message {
      background-color: #66bfa4;
      color: #ffffff;
    }
  }
}
</style>
